<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()
								+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/dpl.css" rel="stylesheet">
	<link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/bui.css" rel="stylesheet">
	<script src="http://g.tbcdn.cn/fi/bui/jquery-1.8.1.min.js"></script>
	<script src="http://g.alicdn.com/bui/seajs/2.3.0/sea.js"></script>
	<script src="http://g.alicdn.com/bui/bui/1.1.21/config.js"></script>
	<style>
		body {
			padding: 30px;
		}
		
		.row table {
			margin-left: 9px;
		}
		
		.row thead {
			background: #D9EDF7;
		}
		
		.row table th, .row table td {
			text-align: center;
		}
		
		.well {
			background: #D9EDF7;
			width: 97.7%;
		}
	</style>
</head>
<body>
	<div class="well">
		<form class="" action="<%= basePath %>workflow/listDeploy">
			<!-- 指定查询条件 -->
			<input type="text" class="control-text span-width" 
				placeholder="部署名称…" name="keyword"
				value="<s:property value="#keyword"/>"> 
			<input type="submit" class="button button-info" 
				value="查询" style="margin-left: 30px;">
			
			<!-- 部署按钮，点击后弹出隐藏页面 -->
			<a href="#" id="addProcedure" class="button button-default"
				style="margin-left: 30px;">部署</a>
		</form>
		<s:fielderror></s:fielderror>
	</div>
	<div class="row">

		<table class="table table-bordered">
			<thead>
				<tr>
					<th>编号</th>
					<th>流程名称</th>
					<th>部署时间</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<!-- 迭代输出表格信息 -->
				<s:iterator value="#pageInfo.basePageList" var="deployment">
					<tr>
						<td>
							<s:property value="#deployment.id"/>
						</td>
						<td>
							<s:property value="#deployment.name"/>
						</td>
						<td>
							<s:date name="#deployment.deploymentTime"
								format="yyyy-MM-dd HH:mm:ss"/>
						</td>
						<td>
							<a href="deleteDeployment?deploymentId=<s:property value="#deployment.id"/>" 
								class="delete button" style="border: 0px;">
								<i class="icon-black icon-trash"></i>
							</a>
						</td>
					</tr>
				</s:iterator>
			</tbody>
		</table>

		<div>

			<div class="pagination pull-right">
				<ul>
					<!-- 显示总记录数和总页数 -->
					<li class="disabled" style="letter-spacing:2px;">
						<a href="">
							总共<s:property value="#pageInfo.rootListSize"/>条/<s:property value="#pageInfo.pageCount"/>页
						</a>
					</li>

					<!-- 是否要上一页按钮 -->
					<s:if test="#pageInfo.nowPage>1">
						<li class="active">
							<a href="<%= basePath %>workflow/listDeploy?keyword=<s:property value="#keyword"/>&targetPage=<s:property value="#pageInfo.nowPage - 1"/>">« 上一页</a>
						</li>
					</s:if>
					<s:else>
						<li class="disable">
							<a href="">« 上一页</a>
						</li>
					</s:else>
					
					<!-- 迭代输出每一页的页号 -->
					<s:iterator value="#pageInfo.pageNoList" var="page">
						<!-- 首先确保不是-1 -->
						<s:if test="#page != -1">
							<s:if test="#page != 0">
								<!-- 如果是当前页，特殊颜色显示 -->
								<s:if test="#page == #pageInfo.nowPage">
									<li class="active">
										<a href="<%= basePath %>workflow/listDeploy?keyword=<s:property value="#keyword"/>&targetPage=<s:property value="#page"/>">
											<s:property value="#page"/>
										</a>
									</li>
								</s:if>
								
								<!-- 否则一般颜色显示 -->
								<s:else>
									<li>
										<a href="<%= basePath %>workflow/listDeploy?keyword=<s:property value="#keyword"/>&targetPage=<s:property value="#page"/>">
											<s:property value="#page"/>
										</a>
									</li>
								</s:else>
							</s:if>
							<s:else>
								<li>
									<a href="<%= basePath %>workflow/listDeploy?keyword=<s:property value="#keyword"/>&targetPage=1">...</a>
								</li>
							</s:else>
						</s:if>
					</s:iterator>
					
					<!-- 是否需要最后一页的按钮 -->
					<s:if test="#pageInfo.pageCount == #pageInfo.nowPage">
						<li class="disable">
							<a href="">下一页 »</a>
						</li>
					</s:if>
					<s:else>
						<li class="active">
							<a href="<%= basePath %>workflow/listDeploy?keyword=<s:property value="#keyword"/>&targetPage=<s:property value="#pageInfo.nowPage + 1"/>">下一页 »</a>
						</li>
					</s:else>
				</ul>
			</div>
		</div>

	</div>

	<!-- 此段代码是部署文件的上传表单，此节点内部的内容会在弹出框内显示,默认隐藏此节点-->
	<div id="content" class="hidden" style="visibility: hidden;">
		<form id="form" action="<%= basePath %>workflow/deploy" 
			class="form-horizontal" enctype="multipart/form-data" method="post">
			<div class="row" style="text-align: center;">
				<div class="form-group" style="margin-top: 40px;">
					<label for="exampleInputFile">选择部署文件：</label> 
					<input type="file" id="exampleInputFile" class="control" name="upload">
				</div>
			</div>
		</form>
	</div>
	
	<!-- 部署 -->
	<script type="text/javascript">
		BUI.use([ 'bui/overlay', 'bui/form' ], function(Overlay, Form) {

			var form = new Form.HForm({
				srcNode : '#form'
			}).render();

			var dialog = new Overlay.Dialog({
				title : '添加流程 ',
				width : 450,
				height : 200,
				//配置DOM容器的编号
				contentId : 'content',
				success : function() {
					$("#form").submit();
				}
			});

			$('#addProcedure').on('click', function() {
				dialog.show();
			});

		});
	</script>
	<!-- script end -->

	<!-- 删除 script -->
	<script type="text/javascript">
		var href = "";
		BUI.use('bui/overlay', function(Overlay) {
			var dialog = new Overlay.Dialog({
				title : '确认框 ',
				width : 300,
				height : 200,
				bodyContent : '<p>是否确认删除  ？ </p>',
				success : function() {
					window.location.href = href;
				}
			});

			$('.delete').on('click', function(e) {
				e.preventDefault();
				href = this.href;
				console.log(href)
				dialog.show();
			});

			$('.update').on('click', function() {
				var value = this.value;
				window.location.href = "userUpdate.jsp";
			});
		});
	</script>
</body>
</html>